<template>
	<view class="page_box">
		<view class="search">
			<view class="search_left">
				{{store_default_data.title}}<text v-if="scene && !seatShow"
					style="margin-left: 10rpx;">{{scene.title}}</text>
			</view>
			<view style="display: flex; padding-right: 10rpx;">
				<view class="search_right" @tap="store_collectionApi(store_default_data.is_collection)">
					<image src="https://can.clkejj.com/static/Project_drawing 40.png" v-if="store_default_data.is_collection" mode="">
					</image>
					<image src="https://can.clkejj.com/static/Project_drawing 39.png" v-else mode=""></image>
				</view>
				<view class="search_right"
					@tap="routerTo('/pages/order_all/ordersearch/ordersearch?id='+store_default_data.id)">
					<image src="https://can.clkejj.com/static/Project_drawing 34.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="hade_location">
			<view class="hade_location_left" @tap="goorderAll()">
				<view class="hade_location_left_top">
					<text>{{store_default_data.alias_title}}</text>
					<u-icon v-if="option!==3" name="arrow-right" color='#313131' size="24rpx"></u-icon>
				</view>
				<view class="hade_location_left_down">{{store_default_data.desc}}</view>
			</view>
			<view class="" v-if="seatShow">
				<view class="" v-if="store_default_data.takeaway_switch || store_default_data.delivery_switch">
					<view class="hade_location_right" v-if="store_default_data.is_business==1">
						<view class="hade_location_right_content"
							:class="{hade_location_right_content_activate:activate_data==1&&store_default_data.delivery_switch}"
							@tap="activate(1)" v-if="store_default_data.delivery_switch">
							自取
						</view>
						<view class="hade_location_right_content"
							:class="{hade_location_right_content_activate:activate_data==2&&store_default_data.takeaway_switch}"
							@tap="activate(2)" v-if="store_default_data.takeaway_switch">
							外卖
						</view>
					</view>
					<view class="tag" v-else>已歇</view>
				</view>
				<view class="tag" v-else>歇业中</view>
			</view>
			<view class="" v-else>
				<view class="" v-if="store_default_data.is_business==1"></view>
				<view class="tag" v-else>已歇业</view>
			</view>
		</view>
		<view class="felx">
			<!-- <orderlist ref="order_ref" @aid_mgs='aid_mgs' :index='components_index' :content='store_infoApi_data'></orderlist> -->
			<view class="felx_right_box">
				<scroll-view scroll-y="true" style="height: 100%;">
					<!-- 	:refresher-enabled='true'
						@refresherpulling='refresherpulling' -->
					<view class="felx_right_box_conten">
						<view class="felx_right_box_conten_img">
							<u-swiper :list="list1" :height='500' @click="swpclick(item.url)"></u-swiper>
						</view>
						<view class="felx_right_box_conten_title">
							<!-- {{store_infoApi_data[childindex].name}} -->
						</view>
						<view style="margin-top: 150rpx;" v-if="order_List.length<1">
							<u-empty mode="data" :iconSize='150' :textSize='24' text='暂无此类商品' icon=""></u-empty>
						</view>
						<ordercard class="hwhj_order" :order_id='order_id' @specification="specification" :content='order_List'
							:store_id='store_default_data.id' @order='order_carListApi' :activate_data='activate_data'
							@login='enter=true'>
						</ordercard>
					</view>
					<height :hg='70'></height>
				</scroll-view>
			</view>
		</view>
		<close v-if="show_specification!=true" :shopping_trolley_list='shopping_trolley_list' @update='order_carListApi'
			@register='register' :addAdish='addAdish' :seatShow='seatShow'>
		</close>

		<specification ref='specification' :store_id='store_default_data.id' :activate_data='activate_data'
			:order_id='order_id' :type='order_type' @order='order_carListApi' :show='show_specification'
			@close='show_specification=false' @login='enter=true'>
		</specification>

		<login :show="enter" @loadpage="unloadpage" @closepage='closepage'></login>
		<!-- 领券组件 -->
		<!-- <coupn_view></coupn_view> -->

		<u-popup :safeAreaInsetBottom='false' mode="center" :round='"16rpx"' :show="popshow">
			<view class="popBox flexColumn">
				<view class="people_title">就餐人数</view>
				<view class="people flexc flexw flexs">
					<view class="people_item " @click="setindex(index)" :class="peopleCur==index?'active':''"
						v-for="(item,index) in 7" :key="index">
						{{index + 1}}人
					</view>
					<view class="people_item ">
						<view class="" v-if="addshow" @click="setadd">
							<span>更多</span>
							<image src="https://can.clkejj.com/static/edit.png" mode=""></image>
						</view>
						<view class="people_item_ipt" v-else>
							<input maxlength="2" v-model="people" type="number" placeholder="请输入"
								placeholder-style="font-size:24rpx;" />
						</view>
					</view>
				</view>
				<view class="people_btn" @click="Popconfirm()">确认</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Location from "@/utils/wxApi.js"
	import {
		store_default,
		store_collection,
		store_cancelColl,
		store_info,
		store_itemPrice,
		store_item,
		store_goodsSearch,
		order_joinCar,
		order_carList,
		order_empty,
		seat
	} from "@/api/comm.js"
	import {forEach} from "lodash"
	import {cellphone} from "@/utils/type_height.js"
	import {userInfo} from "@/api/public.js"
	// import coupn_view from '@/components/coupn_view/coupn_view'
	export default {
		// components: {coupn_view},
		data() {
			return {
				addshow: true,
				popshow: false,
				// 胶囊开关
				activate_data: 2,
				// 规格参数
				show_specification: false,
				list1: [],
				childindex: 0, //侧边栏子组件传过来的索引
				store_default_data: {}, //默认门店
				store_infoApi_data: [], //分类列表
				order_List: [], //此分类下的商品
				store_id: '', //选择门店后使用选择的门店
				specification_list: [], //规格参数
				order_id: '', //当前规格商品id
				order_type: null, //判断多规格还是单规格
				style: [], //规格动态样式
				orderprive: 0, //价格
				shopping_trolley_list: {}, //购物车列表
				display: false, //页面数据未加载前隐藏
				enter: false, //判断是否登录登录
				System_height: cellphone(), //系统高度
				components_index: 0, //刷新组件索引
				scene: null,
				seatShow: true,
				peopleCur: 0,
				peopleCount: 1,
				people: '',
				addAdish: false,
				option: null,
				jumptype:null,
			}
		},
		onLoad(options) {
			this.order_List = []
			console.log('传递的参数',options)
			this.jumptype = options.jumptype
			if (options.scene) {
				let option = uni.getStorageSync('option')
				if (option !== 3) {
					order_empty()
				}
				let bb = options.scene.split('_')
				let cc = bb[1]
				if (cc == '1' || cc == 1) {
					uni.setStorageSync('firstPay', 1)
				} else {
					uni.setStorageSync('firstPay', 2)
				}
				//2先餐后付款 //1先付款后餐
				uni.setStorageSync('option', 3)
				uni.setStorageSync('scene', bb[0])
				this.activate_data = 3
				this.getseat(bb[0])
			}
			this.getlocation() //模糊定位
			this.store_defaultApi(1) //默认门店
		},
		onShow() {
			this.store_defaultApi() //默认门店
			let user = uni.getStorageSync('userinfo')
			let add = uni.getStorageSync('addAdish') //加菜还是结算
			let option = uni.getStorageSync('option')
			let scene = uni.getStorageSync('scene')
			let firstPay = uni.getStorageSync('firstPay')
			this.option = option
			if (user) {
				this.getUser()
			}
			if (option == 3) {
				this.seatShow = false
				this.getseat(scene)
			} else {
				if (scene) {
					uni.removeStorageSync('scene')
					uni.removeStorageSync('peopleCount')
				}
				this.seatShow = true
				this.addAdish = false
			}
			this.enter = false
			this.order_carListApi() //购物车列表
			this.activate_data = option
		},
		methods: {
			goorderAll() {
				let option = uni.getStorageSync('option')
				if (option !== 3) {
					this.routergo('/pages/order_all/selectstore/selectstore')
				}
			},
			async getUser() {
				let user = await userInfo()
				if (user.code == 1) {
					uni.setStorageSync('user', user.data)
				}
			},
			Popconfirm() {
				this.popshow = false
				if (this.addshow) {
					uni.setStorageSync('peopleCount', this.peopleCount)
				} else {
					uni.setStorageSync('peopleCount', this.people)
				}
				this.order_carListApi()
			},
			setadd() {
				this.addshow = false
				this.peopleCur = null
			},
			setindex(index) {
				this.peopleCur = index
				this.peopleCount = index + 1
				this.addshow = true
				this.people = ''
			},
			// 获取桌号信息
			async getseat(id) {
				let peopleCount = uni.getStorageSync('peopleCount')
				let token = uni.getStorageSync('userinfo').token
				let firstPay = uni.getStorageSync('firstPay')
				let res = await seat({
					id
				})
				if (res.code == 1) {
					this.scene = res.data
					this.seatShow = false
					uni.setStorageSync('shop', res.data.store_id)
					this.store_defaultApi() //默认门店
					if (res.data.order_id > 0) {
						if (firstPay == 1) {
							this.addAdish = false
						} else {
							this.addAdish = true
						}
						uni.setStorageSync('orderId', res.data.order_id)
						this.popshow = false
					} else {
						this.addAdish = false
					}
					uni.setStorageSync('addAdish', this.addAdish)
					this.order_carListApi()
					if (!peopleCount && res.data.order_id == 0) {
						this.popshow = true
					}
				}
			},
			async activate(index) {
				if (this.components_index == index) return
				if (index == 1) {
					this.components_index = 1
				} else {
					this.components_index = 2
				}
				uni.setStorageSync('option', index)
				this.activate_data = index
				this.store_defaultApi()
				// 清空购物车
				let data = await order_empty()
				uni.showToast({
					title: data.msg,
					icon: 'none'
				})
				this.order_carListApi()
			},
			async specification(e) {
				this.order_id = e.e
				this.order_type = e.type
				setTimeout(() => {
					this.$refs.specification.specification()
					this.show_specification = true
				}, 500)
			},
			aid_mgs(item, index,id) {
				this.childindex = index
				this.order_List = []
				this.order_List.push(...item)
			},
			swpclick(url) {
				uni.navigateTo({
					url: url
				})
			},
			async getlocation() {
				uni.getLocation({
					success(data) {
						uni.setStorageSync('location', data)
					}
				})
			},
			async store_defaultApi(e) {
				let shop = uni.getStorageSync('shop')
				let data = await store_default({
					id: shop || ''
				})
				this.store_default_data = data.data
				if (data.data.takeaway_switch == 1 && data.data.delivery_switch !== 1) {
					this.activate_data = 2
					uni.setStorageSync('option', 2)
				}
				this.list1 = data.data.images
				if (e == 1) {
					this.get_store_infoApi() //门店下的分类
				}
			},
			async store_collectionApi(comtent) {
				if (!uni.getStorageSync('userinfo')) {
					this.enter = true
					uni.showToast({
						title: '未登录',
						icon: 'none'
					})
					return
				} else {
					if (comtent) {
						let data = await store_cancelColl({
							store_id: this.store_default_data.id
						})
						if (data == 1) {
							// uni.showToast({
							// 	title: data.msg,
							// 	icon: 'success'
							// })
						} else {
							// uni.showToast({
							// 	title: data.msg,
							// 	icon: 'error'
							// })
						}
					} else {
						let data = await store_collection({
							store_id: this.store_default_data.id
						})
						if (data == 1) {
							// uni.showToast({
							// 	title: data.msg,
							// 	icon: 'success'
							// })
						} else {
							// uni.showToast({
							// 	title: data.msg,
							// 	icon: 'error'
							// })
						}
					}
					this.store_defaultApi()
					this.order_carListApi()
				}
			},
			async get_store_infoApi() {
				let data = await store_info({
					store_id: this.store_default_data.id,
					shipment: this.activate_data || 2
				})
				let shop2 = data.data.filter(f =>f.name === '好物好价')
				this.store_infoApi_data = []
				this.store_infoApi_data.push(...shop2)
				this.order_List = shop2[0].goods
				this.display = true
			},

			async selective_specification(index, id, name, type) {
				let that = this
				this.specification_list.forEach((item, idx) => {
					item.item.forEach((item1, idx1) => {
						if (item1.id == id) {
							if (item1.is_show) {
								if (type == 2) {
									item1.is_show = false
								}
							} else {
								item1.is_show = true
							}
						} else {
							if (type == 1) {
								// 多选加这个
								if (idx == index) {
									item1.is_show = false
								}
							}
						}
					})
				})
				this.style = []
				this.specification_list.forEach(item => {
					item.item.forEach((item1, idx1) => {
						if (item1.is_show) {
							this.style.push(item1)
						}
					})
				})
				this.store_itemPriceApi()
				this.$forceUpdate()
			},
			// 价格计算
			async store_itemPriceApi() {
				let str = ''
				this.style.forEach(res => {
					str += res.id + '_'
				})
				str = str.substring(0, str.length - 1)
				let data = await store_itemPrice({
					goods_id: this.order_id,
					spu_id: str
				})
				this.orderprive = Location.BumberPrecision(data.data.price)
			},
			// 添加购物车
			async add_joinCar() {
				if (!uni.getStorageSync('userinfo')) {
					this.enter = true
					return
				}
				let str = []
				this.style.forEach(res => {
					str.push(res.id)
				})
				let data = await order_joinCar({
					store_id: this.store_default_data.id,
					goods_id: this.order_id,
					spu_id: str,
					count: 1,
					order_type: this.activate_data

				})
				if (data.code == 1) {
					uni.showToast({
						title: data.msg,
						icon: "none"
					})
					this.order_carListApi()
					this.show_specification = false
					this.style = []
				} else {
					uni.showToast({
						title: data.msg,
						icon: "none"
					})
				}
			},
			// 购物车列表
			async order_carListApi() {
				let token = uni.getStorageSync('userinfo').token
				if (!token) {
					this.shopping_trolley_list = []
					return
				}
				let data;
				let peopleCount = uni.getStorageSync('peopleCount') || 0
				let iscwf = uni.getStorageSync('public').iscwf
				let firstPay = uni.getStorageSync('firstPay')
				let type;
				if (this.addAdish) {
					type = 2
				} else {
					type = 1
				}
				if (iscwf == 1) {
					if (firstPay == 2) {
						data = await order_carList({
							peopleCount: peopleCount,
							type
						})
					} else {
						data = await order_carList()
					}
				} else {
					data = await order_carList()
				}
				if (data.code == 1) {
					this.shopping_trolley_list = data.data
				} else {
					this.shopping_trolley_list = []
				}

			},
			//结算前判断是否登录
			register() {
				this.enter = true
			},
			router_close(url) {
				uni.reLaunch({
					url: url
				})
			},
			routergo(url) {
				uni.navigateTo({
					url
				})
			},
			//未登录关闭弹出层需要关掉组件
			closepage() {
				this.enter = false
			},
			refresherpulling() {

			}
		},
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}
	.page_box .box_right{
		width: 470rpx!important;
	}
</style>
<style lang="scss" scoped>
	.popBox {
		padding: 22rpx;
		width: 561rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		.people_title {
			font-size: 24rpx;
			color: #676767;
		}
		.people {
			margin: 20rpx 0;
			.people_item {
				width: 23%;
				height: 63rpx;
				background: #F4F5F7;
				border-radius: 14rpx;
				border: 1rpx solid #999999;
				text-align: center;
				line-height: 63rpx;
				margin-top: 24rpx;
				font-size: 24rpx;
				color: #999999;
				image {
					width: 18rpx;
					height: 18rpx;
				}
				.people_item_ipt {
					padding: 8rpx;
					box-sizing: border-box;
					input {
						color: #000;
					}
				}
			}
			.active {
				border: 1rpx solid #6F3810 !important;
				color: #6F3810 !important;
				background: #F4FCFF !important;
			}
		}
		.people_btn {
			width: 100%;
			height: 74rpx;
			background: #6F3810;
			border-radius: 659rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 74rpx;
			text-align: center;
		}
	}
	.search {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.search_left {
			font-size: 32rpx;
			font-weight: 600;
			color: #6F3810;
			padding-left: 30rpx;
		}
		.search_right {
			width: 62rpx;
			height: 62rpx;
			padding: 0 10rpx;
		}
	}
	.hade_location {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #F4F4F4;
		.tag {
			height: 39rpx;
			border-radius: 4rpx;
			border: 1rpx solid #6F3810;
			font-size: 24rpx;
			font-weight: 400;
			color: #6F3810;
			text-align: center;
			box-sizing: border-box;
			padding: 0 10rpx;
			margin-right: 10rpx;
			line-height: 37rpx;
		}
		.hade_location_left {
			margin-left: 20rpx;
			.hade_location_left_top {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				font-weight: 600;
				color: #313131;
				text {
					-webkit-line-clamp: 1; //设置几行
					display: -webkit-box; //设置为伸缩盒弹性盒子展示
					overflow: hidden; //超出隐藏
					text-overflow: ellipsis; //设置超出部分以省略号展示
					-webkit-box-orient: vertical; //伸缩盒弹性盒子的排列方式
				}
			}
			.hade_location_left_down {
				font-size: 24rpx;
				font-weight: 400;
				color: #666A6B;
				margin-top: 5rpx;
			}
		}
		.hade_location_right {
			// width: 180rpx;
			height: 63rpx;
			background: #F4F4F4;
			border-radius: 32rpx;
			margin-right: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.hade_location_right_content {
				width: 90rpx;
				height: 63rpx;
				text-align: center;
				line-height: 63rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #949494;
			}
			.hade_location_right_content_activate {
				background-color: #6F3810;
				color: #FDFEFF;
				border-radius: 32rpx;
			}
		}
	}
	.felx {
		display: flex;
		justify-content: space-between;
		.felx_right_box {
			width: 100%;
			height: 79vh;
			.felx_right_box_conten {
				width: 96%;
				margin: 0 auto;
				.felx_right_box_conten_img {
					width: 100%;
					border-radius: 16rpx;
					overflow: hidden;
				}
				.felx_right_box_conten_title {
					font-size: 26rpx;
					font-weight: 600;
					color: #353535;
					padding: 30rpx 0 30rpx 10rpx;
				}
			}
		}
	}
	.specification {
		width: 688rpx;
		background: #f00;
		border-radius: 12rpx;
		position: relative;
		z-index: 10074;
		.specification_title {
			text-align: center;
			font-size: 32rpx;
			font-weight: 600;
			color: #353535;
			margin: 0 auto;
		}
		.specification_title_1 {
			width: 95%;
			height: 504rpx;
			margin: 0 auto;
			.specification_title_1_title {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #676767;
				display: inline-block;
				padding: 20rpx 0;
			}
			.specification_title_1_content {
				display: flex;
				overflow-x: auto;
				display: -webkit-box;
				-webkit-overflow-scrolling: touch;
				.specification_title_1_content_flex_activate {
					background: #F4FCFF !important;
					border: 1rpx solid #6F3810 !important;
					color: #6F3810 !important;
				}
				.font_sizi_1 {
					color: #6F3810;
				}
				.font_sizi_2 {
					border-left: 1rpx solid #6F3810;
				}
				.specification_title_1_content_flex {
					height: 63rpx;
					background: #FFFFFF;
					border-radius: 14rpx;
					border: 1rpx solid #F1F1F1;
					margin-right: 20rpx;
					text-align: center;
					line-height: 63rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #343434;
					padding: 0 40rpx;
				}
			}
		}
		.close {
			position: absolute;
			bottom: -150rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
	.selected {
		width: 688rpx;
		padding: 20rpx 0;
		background: #F5F5F5;
		margin-top: 60rpx;
		text {
			font-size: 24rpx;
			font-weight: 400;
			color: #363636;
		}
		text:nth-child(1) {
			font-size: 24rpx;
			font-weight: 400;
			color: #676767;
			padding: 0 20rpx;
			margin-left: 10rpx;
		}
	}
	.sublist {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 40rpx;
		.sublist_left {
			text:nth-child(1) {
				font-size: 28rpx;
				font-weight: 600;
				color: #363636;
			}
			text:nth-child(2) {
				font-size: 28rpx;
				font-weight: 600;
				color: #FF4000;
				text:nth-child(1) {
					font-size: 28rpx;
					font-weight: 600;
					color: #FF4000;
					font-size: 24rpx;
				}
			}
		}
		.sublist_right {
			width: 234rpx;
			height: 62rpx;
			background: #6F3810;
			border-radius: 12rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #F3FCFF;
			line-height: 62rpx;
			text-align: center;
		}
	}
</style>